<template>
    <div class="common-card" :class="[themeType]">
        <public-title title="体检数据" :themeType="themeType" />
        <div class="inner">
            <div class="type-time">
                <span
                    v-for="(item, index) in timeTab"
                    :key="index"
                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
                    @click="handleSelect(index, item.value)"
                    >{{ item.name }}</span
                >
            </div>
            <div class="physical-container">
                <a-spin :spinning="spinning" class="spin"></a-spin>
                <div class="RadarCharts" ref="radarChartsRef"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { onMounted, ref, unref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
    import * as echarts from 'echarts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { getPhysicalData } from '/@/views/centralScreen/centralScreen.api.ts';
    import { useUserStore } from '/@/store/modules/user.ts';

    const props = defineProps({
        refreshState: {
            type: Boolean,
        },
        setting: Object,
    });
    const { themeType } = useTheme();
    const { setSession, getSession } = useSession();
    const { PHYSICAL_DATA } = caching;
    const { setSpin, spinning } = useSpin();
    const selectIndex = ref(0);
    const selectVal = ref('2'); //本年
    function handleSelect(index: number, value: string) {
        selectIndex.value = index;
        selectVal.value = value;
        setSpin(true);
        setTimeout(() => {
            setSpin(false);
        }, 1000);
        getList();
    }

    onMounted(() => {
        getList();
    });

    const { radarList, setRadarList, getRadarList } = useHospitalList();
    const userStore = useUserStore();

    async function getList() {
        setSpin(true);
        try {
            let orgCodeList = userStore.getCenterInfo?.serviceScope || '';
            let centerId = userStore.getCenterInfo?.id || '';
            console.log('centerId', centerId);
            const { code, result } =
                (await getPhysicalData({
                    dataType: props.setting.dataType,
                    condition: selectVal.value,
                    orgCodeList,
                    centerId,
                })) || {};
            setSpin(!spinning.value);
            if (code != 200) {
                return;
            }
            setSession(PHYSICAL_DATA, JSON.stringify(result));
            setValue(result);
        } catch {
            const result = JSON.parse(getSession(PHYSICAL_DATA));
            setValue(result);
            setSpin(!spinning.value);
        }
    }

    function setValue(result) {
        setRadarList(result);
        const everyEmpty = allValueEmpty('value', getRadarList());
        // everyEmpty && initChart();
        initChart();
    }

    const radarChartsRef = ref<HTMLElement>();

    function initChart() {
        const myChart = echarts.init(radarChartsRef.value);
        let countList = radarList?.value?.map((item) => item?.userCount) || [];
        // if (countList?.length < 1) return;
        let max = Math.max(...countList);
        const indicator = radarList?.value?.map((item) => ({ name: item?.hospitalName, max: max }));
        const option = radarCharts({ indicator, countList, theme: unref(themeType) });
        myChart.setOption(option);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }

    watch(
        () => props.refreshState,
        () => {
            getList();
        }
    );
</script>
<style lang="less" scoped>
    .inner {
        height: calc(100% - 40px);

        .physical-container {
            width: 96%;
            height: calc(100% - 35px);
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            position: relative;

            .spin {
                position: absolute;
                left: 50%;
                top: 50%;
            }

            .RadarCharts {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
